<!--
 * @Description: 登录页的主组件
 * @Author: youzi
 * @Date: 2019-08-08 15:35
 * @LastEditors: youzi
 * @LastEditTime: 2020-10-21 14:09:42
 * @todo: 已完成
 -->

<template>
  <div class="login" ref="loginContainer">
    <!-- <a-form @submit.prevent="doLogin" :autoFormCreate="form => (this.form = form)"> -->
    <!-- <img class="login-img" src="static/img/login-img.png" ref="loginImg" alt="" /> -->
    <!-- <div>
      <img src="static/img/login-system-name.png" alt="" class="system-name" />
    </div> -->
    <a-form class="login-form" @submit.prevent="doLogin" :form="form">
      <!-- :style="{ height: height + 'px' }" -->
      <p class="login-title" id="loginTitle">蓝得系统</p>
      <!-- <a-form @submit.prevent="doLogin" :form="form" class="real-login-form"> -->
      <!-- <a-tabs
        size="large"
        :tabBarStyle="{ textAlign: 'center' }"
        style="padding: 0 2px;"
        :activeKey="activeKey"
        @change="handleTabsChange"
      > -->
      <!-- <a-tab-pane tab="账户密码登录" key="1"> -->
      <!-- <a-form-item
            fieldDecoratorId="usercode"
            :fieldDecoratorOptions="{ rules: [{ required: true, message: '请输入账户名', whitespace: true }] }"
          > -->
      <!-- <a-form-item>
          <a-input
            size="large"
            v-decorator="['usercode', { rules: [{ required: true, message: '请输入账户名', whitespace: true }] }]"
          >
            <a-icon slot="prefix" type="user"></a-icon>
          </a-input>
        </a-form-item> -->
      <!-- <a-form-item
            fieldDecoratorId="password"
            :fieldDecoratorOptions="{ rules: [{ required: true, message: '请输入密码', whitespace: true }] }"
          > -->
      <!-- <a-form-item>
          <a-input
            size="large"
            type="password"
            v-decorator="['password', { rules: [{ required: true, message: '请输入密码', whitespace: true }] }]"
          >
            <a-icon slot="prefix" type="lock"></a-icon>
          </a-input>
        </a-form-item> -->
      <!-- </a-tab-pane> -->
      <!-- 手机号登录暂时不做 -->
      <!-- <a-tab-pane tab="手机号登录" key="2">
          <a-form-item>
            <a-input size="large">
              <a-icon slot="prefix" type="mobile"></a-icon>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-row :gutter="8" style="margin: 0 -4px">
              <a-col :span="16">
                <a-input size="large">
                  <a-icon slot="prefix" type="mail"></a-icon>
                </a-input>
              </a-col>
              <a-col :span="8" style="padding-left: 4px">
                <a-button style="width: 100%" class="captcha-button" size="large" @click="getCaptcha"
                  >获取验证码</a-button
                >
              </a-col>
            </a-row>
          </a-form-item>
        </a-tab-pane> -->
      <!-- </a-tabs> -->
      <!-- <div>
        <a style="float: right" @click="regist">注册账户</a>
      </div> -->
      <!-- </a-form> -->
      <div class="real-login-form">
        <a-form-item placeholder="请输入账户名">
          <!-- <label>账户名</label> -->
          <a-input
            class="my-md-input"
            id="loginUser"
            autocomplete="off"
            v-decorator="[
              'usercode',
              {
                rules: [{ required: true, message: '请输入账户名' }, { max: 50, message: '字数不能超过50字' }]
              }
            ]"
          >
            <a-icon slot="prefix" type="user" />
          </a-input>
          <!-- <span class="md-error">账户名不能为空</span> -->
        </a-form-item>
        <a-form-item placeholder="请输入密码">
          <!-- <label>密码</label> -->
          <a-input-password
            class="my-md-input"
            @keydown.enter="doLogin"
            id="loginPwd"
            autocomplete="off"
            v-decorator="[
              'password',
              {
                rules: [{ required: true, message: '请输入密码' }, { max: 50, message: '字数不能超过50字' }]
              }
            ]"
          >
            <a-icon slot="prefix" type="lock" />
          </a-input-password>
          <!-- <span class="md-error">密码不能为空</span> -->
        </a-form-item>
        <a-button
          :loading="loading"
          style="width: 100%; margin-top: 4px"
          size="large"
          htmlType="submit"
          type="primary"
          class="login-btn"
        >
          <!-- @click="doLogin" -->
          登录
        </a-button>
      </div>
    </a-form>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  name: 'Login',
  data() {
    return {
      initial: '',
      loading: false,
      error: '',
      activeKey: '1',
      form: this.$form.createForm(this),
      usercode: null,
      password: null,
      height: 0
    };
  },
  computed: {
    systemName() {
      return this.$store.state.setting.systemName;
    },
    copyright() {
      return this.$store.state.setting.copyright;
    }
  },
  created() {
    this.$db.clear();
    this.$router.options.routes = [];
  },
  watch: {},
  mounted() {
    // this.getSSO();
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    getSSO() {
      this.$get('sso_user', {})
        .then(async r => {
          let data = r.data.data;
          this.saveLoginData(data);
          await setTimeout(() => {
            this.loading = false;
          }, 500);
          this.$router.push('/home');
        })
        .catch(() => {
          this.$emit('showLogin');
          setTimeout(() => {
            this.loading = false;
          }, 500);
        });
    },
    /**
     * @description: 无意义的函数
     * @param {type}
     * @return:
     * @logic: 测试发现如果使用自动保存密码的浏览器，用户名和密码不会自动上移，所以在create的时候就调用点击方法，自动点击一次。
     * @editor: youzi
     * @Date: 2019-08-09 17:46
     */
    doLogin(e) {
      if (e) {
        e.preventDefault();
      }
      if (this.activeKey === '1') {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.loading = true;
            this.$post('/login', { ...values })
              .then(async r => {
                let data = r.data.data;
                this.saveLoginData(data);
                await setTimeout(() => {
                  this.loading = false;
                }, 500);
                this.$router.push('/home');
              })
              .catch(() => {
                setTimeout(() => {
                  this.loading = false;
                }, 500);
              });
          }
        });
      }
      if (this.activeKey === '2') {
        // 手机验证码登录
        this.$message.warning('暂未开发');
      }
    },
    regist() {
      this.$emit('regist', 'Regist');
    },
    getCaptcha() {
      this.$message.warning('暂未开发');
    },
    handleTabsChange(val) {
      this.activeKey = val;
    },
    ...mapMutations({
      setSysMsg: 'account/setSysMsg',
      setToken: 'account/setToken',
      setExpireTime: 'account/setExpireTime',
      setPermissions: 'account/setPermissions',
      setRoles: 'account/setRoles',
      setUser: 'account/setUser',
      setTheme: 'setting/setTheme',
      setLayout: 'setting/setLayout',
      setMultipage: 'setting/setMultipage',
      fixSiderbar: 'setting/fixSiderbar',
      fixHeader: 'setting/fixHeader',
      setColor: 'setting/setColor'
    }),
    saveLoginData(data) {
      this.setSysMsg(data.sysMsg);
      this.setToken(data.token);
      this.setExpireTime(data.exipreTime);
      this.setUser(data.user);
      this.setPermissions(data.permissions);
      this.setRoles(data.roles);
      this.setTheme(data.config.theme);
      this.setLayout(data.config.layout);
      this.setMultipage(data.config.multiPage === '1');
      this.fixSiderbar(data.config.fixSiderbar === '1');
      this.fixHeader(data.config.fixHeader === '1');
      this.setColor(data.config.color);
    }
  }
};
</script>

<style lang="less">
/* .login-form {
  .real-login-form {
    .ant-form-explain {
      position: fixed;
      margin-top: -15px;
    }
  }
} */
.my-md-input {
  input {
    border: none;
    border-bottom: 1px solid #1890ff;
    border-radius: 0px !important;
  }
  input:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}
</style>

<style lang="less" scoped>
@loginBorderRadius: 8px;
@baseWidth: 1366;
@imgFormWidth: 380 / @baseWidth * 95%;
.login-title {
  color: #396afe;
  font-size: 26px !important;
  line-height: normal;
  margin-bottom: 3.2rem;
}

.login {
  width: 100%;
  .login-img {
    position: relative;
    // width: (380 / @baseWidth) * 100vw;
    width: @imgFormWidth;
    // height: (430 / @baseWidth) * 100vw;
    border-top-left-radius: @loginBorderRadius;
    border-bottom-left-radius: @loginBorderRadius;
    .system-name {
      position: absolute;
      width: (333 / @baseWidth) * 100vw;
      // height: (42 / @baseWidth) * 100vw;
      margin-top: (83 / @baseWidth) * 100vw;
      margin-left: (40 / @baseWidth) * 100vw;
    }
  }
  .login-form {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-content: center; */
    align-items: center;
    // width: (380 / @baseWidth) * 100vw;
    width: (310 / @baseWidth) * 100vw;
    height: (356 / @baseWidth) * 100vw;
    // height: (430 / @baseWidth) * 100vw;
    .real-login-form {
      // width: (250 / 380) * 100%;
      // width: (310 / @baseWidth) * 100vw;
      // height: (356 / @baseWidth) * 100vw;
      /* label {
        top: -3px;
      } */
      .login-btn {
        height: 40px;
        font-size: 16px !important;
        border-radius: 20px !important;
      }
    }
    border-radius: @loginBorderRadius;
    // border-top-right-radius: @loginBorderRadius;
    // border-bottom-right-radius: @loginBorderRadius;
    background-color: #fff;
  }
}
</style>
